<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<wicket:extend>
		<div class="row">
			<h1 id="tabs">Tabs</h1>
          	<h3 class="subheader">Tabs are elements that help you organize and navigate multiple documents in a single container. They can be used for switching between items in the container.</h3>
		  	<hr>
		  	<h2 id="basic">Horizontal Tabs</h2>
            <p>You can create horizontal tabs using minimal markup.</p>
			<div>
				
				<h4>HTML</h4>

				<pre><code class="language-html"><div class="code-container"><span class="tag">&lt;<span class="title">div</span> <span class="attribute">wicket:id</span>=<span class="value">&quot;tabHorizontal&quot;</span>&gt;</span><span class="tag">&lt;/<span class="title">div</span>&gt;</span>
</div></code>
</pre>

				<h4>Java</h4>

				<pre><code class="language-html"><div class="code-container">add(new FoundationButton("btn", Model.of("Click")));
</div></code>
</pre>
				
				<div>
					<h4>Rendered HTML</h4>		
					<div wicket:id="tabHorizontal">
					</div>
				</div>
			</div>
			<hr>
			<h2 id="basic">Vertical Tabs</h2>
            <p>You can create vertical tabs using minimal markup.</p>
            <div>
                
                <h4>HTML</h4>

                <pre><code class="language-html"><div class="code-container"><span class="tag">&lt;<span class="title">div</span> <span class="attribute">wicket:id</span>=<span class="value">&quot;tabVertical&quot;</span>&gt;</span><span class="tag">&lt;/<span class="title">div</span>&gt;</span>
</div></code>
</pre>

                <h4>Java</h4>

                <pre><code class="language-html"><div class="code-container">add(new FoundationTab("tabVertical", tabs).setVerticalTab(true));
</div></code>
</pre>
                
                <div>
                    <h4>Rendered HTML</h4>      
					<div wicket:id="tabVertical">
					</div>
                </div>
            </div>
			<hr>
			<h2 id="basic">Ajax-enhanced Tabs</h2>
            <p>You can create Ajax-enhanced tabs using minimal markup.</p>
            <div>
                
                <h4>HTML</h4>

                <pre><code class="language-html"><div class="code-container"><span class="tag">&lt;<span class="title">div</span> <span class="attribute">wicket:id</span>=<span class="value">&quot;ajaxTab&quot;</span>&gt;</span><span class="tag">&lt;/<span class="title">div</span>&gt;</span>
</div></code>
</pre>

                <h4>Java</h4>

                <pre><code class="language-html"><div class="code-container">add(new AjaxFoundationTab("ajaxTab", tabs));
</div></code>
</pre>
                
                <div>
                    <h4>Rendered HTML</h4>                          
					<div wicket:id="ajaxTab">
					</div>
                </div>
            </div>
		</div>	
	</wicket:extend>
</body>
</html>